<template>
	<view class="friend">
		<!-- 小程序导航栏 -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar placeholder autoBack>
			<view slot="center" class="nav-center">
				<u-search placeholder="请输入内容" @click="handleSearch()" disabled></u-search>
			</view>
		</u-navbar>
		<!-- #endif -->

		<!-- 滚动区域 -->
		<scroll-view class="list-container" scroll-y @scrolltolower="reachBottom">

			<!-- 我的好友 -->
			<view class="section-title">我的好友</view>
			<template v-if="myFriends.length > 0">
				<friend-list v-for="(item, index) in myFriends" :key="index" :item="item" />
				<u-loadmore v-if="myFriends.length >= 10" :status="loadStatus"></u-loadmore>
			</template>
			<template v-else>
				<u-empty text="暂无好友" icon="/static/img/demo/winter.svg" mode="list"></u-empty>
			</template>

			<!-- 好友请求 -->
			<view class="section-title">好友请求</view>
			<template v-if="pendingRequests.length > 0">
				<view v-for="(request, index) in pendingRequests"  class="request-item">
					<image class="avatar" :src="request.avatar" mode="aspectFill"></image>
					<text class="name">{{ request.username }}</text>
					
					<!-- 对方发来的请求 -->
					<template v-if="request.status === 'pending'">
						<view class="btn-group">
							<button class="accept-btn" @click="acceptRequest(request.userId)">同意</button>
							<button class="reject-btn" @click="rejectRequest(request.userId)">拒绝</button>
						</view>
					</template>
				</view>
			</template>
			<template v-if="sendFriend.length > 0">
				<view v-for="(request, index) in sendFriend"  class="request-item">
					<image class="avatar" :src="request.friendAvatar" mode="aspectFill"></image>
					<text class="name">{{ request.friendName }}</text>
			
					<!-- 自己发出的请求 -->
					<template v-if="request.status === 'pending'">
						<text class="sent-tag">已发送</text>
					</template>
				</view>
			</template>
			<template v-else>
				<u-empty text="暂无好友请求" icon="/static/img/demo/mail.svg" mode="list"></u-empty>
			</template>

		</scroll-view>
	</view>
</template>

<script>
import FriendList from "@/pages/paper/cpns/friend-list.vue";
import {UserFriendApi} from '@/api/index.js'
import websocketMixin from "@/utils/mixins/websocketMixin.js"

export default {
	mixins: [websocketMixin],
	components: {
		FriendList
	},
	data() {
		return {
			friendsData: [],
			myFriends: [], // 我的好友数据
			loadStatus: "loadmore",
			pendingRequests: [] ,// 待处理的好友请求
			sendFriend: []
		};
	},
	onShow() {
		this.loadMyFriends();
	},
	methods: {
		onAddFriendMessage(data){
			this.loadMyFriends();
		},
		// 加载我的好友
		async loadMyFriends() {
			const res = await UserFriendApi.getFriends();
			this.friendsData = res.data;
			this.myFriends = this.friendsData
			    .filter(item => item.status === 'accepted');
			this.pendingRequests = this.friendsData
			   .filter(item => item.friendId === getApp().globalData.userId);
			this.sendFriend = this.friendsData
			    .filter(item => item.userId === getApp().globalData.userId && item.status === 'pending');
		},

		// 同意好友请求
		async acceptRequest(index) {
			const res = await UserFriendApi.agreeFriend(index);
			if (res.code === 200) {
				uni.showToast({
					title: '已同意',
					icon: 'none'
				});
				this.loadMyFriends();
			} else {
				uni.showToast({
					title: '同意失败',
					icon: 'none'
				});
			}
		},

		// 拒绝好友请求
		async rejectRequest(index) {
			const res = await UserFriendApi.refuseFriend(index);
			if (res.code === 200) {
				uni.showToast({
					title: '已拒绝',
					icon: 'none'
				});
				this.loadMyFriends();
			} else {
				uni.showToast({
					title: '拒绝失败',
					icon: 'none'
				});
			}
		},

		// 上拉加载更多
		reachBottom() {
			if (this.loadStatus !== "loadmore") return;
			this.loadStatus = "loading";
			setTimeout(() => {
				const newItem = {
					id: this.myFriends.length + 1,
					name: `用户${this.myFriends.length + 1}`,
					avatar: '/static/img/header/e.svg',
					isFollow: true
				};
				this.myFriends.push(newItem);
				this.loadStatus = "nomore";
			}, 1000);
		},

		handleSearch() {
			// TODO: 处理搜索逻辑
		}
	}
};
</script>

<style lang="scss" scoped>
.friend {
	/* #ifdef MP-WEIXIN */
	/deep/ .u-navbar {
		.u-navbar__content {
			margin-right: 180rpx !important;
		}

		.nav-center {
			width: 100%;
			margin-left: 80rpx;
		}
	}
	/* #endif */

	.list-container {
		flex: 1;
		padding: 20rpx;
		height: calc(100vh - 88rpx); /* 减去导航栏高度 */
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.request-item {
	  display: flex;
	  align-items: center;
	  padding: 20rpx 0;
	  border-bottom: 2rpx solid #eee;
	
	  .avatar {
	    width: 80rpx;
	    height: 80rpx;
	    border-radius: 50%;
	    margin-right: 20rpx;
	  }
	
	  .name {
	    font-size: 28rpx;
	    color: #333;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    flex: 1;
	  }
	
	  .btn-group {
	    display: flex;
	    gap: 10rpx;
	    margin-left: 20rpx; // 添加左边距，避免贴边
	  }
	
	  button {
	    font-size: 24rpx;
	    padding: 0 20rpx;
	    height: 50rpx;
	    line-height: 50rpx;
	    min-width: 100rpx;
	  }
	
	  .accept-btn {
	    background-color: #4CAF50;
	    color: white;
	  }
	
	  .reject-btn {
	    background-color: #f44336;
	    color: white;
	  }
	
	  .sent-tag {
	    color: gray;
	    font-size: 24rpx;
	    margin-left: 20rpx;
	  }
	}
}
</style>